<template>
  <a-modal width="50%" :title="modalTitle" :visible="modalShow" @ok="modalConfirm" @cancel="modalCancel">
    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="控件类型">
        <div class="type">
          <a-radio-group class="type_radio" name="radioGroup" :value="activeKey" @change="radioChange">
            <a-radio v-for="item in radioList" :key="item.id" :value="item.id">
              {{ item.name }}
            </a-radio>
          </a-radio-group>
          <div class="type_unit">
            <a-form-model-item
              v-if="activeKey == 'input'"
              label="最大长度"
              :label-col="{ span: 2 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-input-number style="width: 150px" v-model="form.maxLength" placeholder="请输入最大长度" />
            </a-form-model-item>
            <div v-else-if="activeKey == 'number'">
              <a-form-model-item label="最小值" :label-col="{ span: 2 }" :wrapper-col="{ span: 12 }">
                <a-input-number style="width: 150px" v-model="form.minValue" placeholder="请输入最小值" />
              </a-form-model-item>
              <a-form-model-item label="最大值" :label-col="{ span: 2 }" :wrapper-col="{ span: 12 }">
                <a-input-number style="width: 150px" v-model="form.maxValue" placeholder="请输入最大值" />
              </a-form-model-item>
              <a-form-model-item label="精度" :label-col="{ span: 2 }" :wrapper-col="{ span: 12 }">
                <a-input-number style="width: 150px" v-model="form.precision" placeholder="请输入精度" />
              </a-form-model-item>
            </div>
            <div v-else-if="activeKey == 'select'">
              <a-form-model-item label="枚举值" :label-col="{ span: 2 }" :wrapper-col="{ span: 12 }">
                <SearchEnum @f_setEnum="enumValueChange" :value="form.enum"></SearchEnum>
              </a-form-model-item>
              <a-form-model-item label="是否多选" :label-col="{ span: 2 }" :wrapper-col="{ span: 12 }">
                <a-radio-group name="radioGroup" v-model="form.ismultiple">
                  <a-radio :value="true">
                    是
                  </a-radio>
                  <a-radio :value="false">
                    否
                  </a-radio>
                </a-radio-group>
              </a-form-model-item>
            </div>
            <div v-else-if="activeKey == 'file'">
              <a-form-model-item label="上传数量" :label-col="{ span: 2 }" :wrapper-col="{ span: 12 }">
                <a-input-number style="width: 150px" v-model="form.maxFile" placeholder="请输入最大上传数量" />
              </a-form-model-item>
              <a-form-model-item label="文件类型" :label-col="{ span: 2 }" :wrapper-col="{ span: 12 }">
                <a-radio-group name="radioGroup" v-model="form.fileType">
                  <a-radio value="uploadFile">
                    PDF
                  </a-radio>
                  <a-radio value="uploadImg">
                    图片
                  </a-radio>
                </a-radio-group>
              </a-form-model-item>
            </div>
            <a-form-model-item
              v-else-if="activeKey == 'date'"
              label="请输入时间格式化"
              :label-col="{ span: 2 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-input v-model="form.format" placeholder="请输入格式化 YYYY-MM-DD" />
            </a-form-model-item>
            <a-form-model-item
              v-else-if="activeKey == 'textarea'"
              label="最大长度"
              :label-col="{ span: 2 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-input-number style="width: 150px" v-model="form.maxLength" placeholder="请输入最大长度" />
            </a-form-model-item>
            <a-form-model-item
              v-else-if="activeKey == 'cascader'"
              label="级联范围"
              :label-col="{ span: 2 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-radio-group name="radioGroup" v-model="form.range">
                <a-radio value="ad">
                  全国(不含街道)
                </a-radio>
                <a-radio value="ad4">
                  全国(含街道)
                </a-radio>
                <a-radio value="ad4jx">
                  江西
                </a-radio>
              </a-radio-group>
            </a-form-model-item>
            <div v-else-if="activeKey == 'tree'">
              <a-form-model-item label="枚举值" :label-col="{ span: 2 }" :wrapper-col="{ span: 12 }">
                <SearchEnum @f_setEnum="enumValueChange" :value="form.enum"></SearchEnum>
              </a-form-model-item>
              <a-form-model-item label="是否多选" :label-col="{ span: 2 }" :wrapper-col="{ span: 12 }">
                <a-radio-group name="radioGroup" v-model="form.ismultiple">
                  <a-radio :value="true">
                    是
                  </a-radio>
                  <a-radio :value="false">
                    否
                  </a-radio>
                </a-radio-group>
              </a-form-model-item>
            </div>
          </div>
        </div>
      </a-form-model-item>
      <a-form-model-item label="是否必填">
        <a-radio-group name="radioGroup" v-model="required">
          <a-radio :value="true">
            是
          </a-radio>
          <a-radio :value="false">
            否
          </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="校验规则">
        <RulesAdd ref="rulesAddRef"></RulesAdd>
      </a-form-model-item>
      <a-form-model-item label="响应式">
        <a-input v-model="form.expression" placeholder="请输入表达式 this.selectData.字段名==枚举值" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      activeKey: '', // 单选框当前选中值
      // 单选框列表
      radioList: [
        { id: 'input', name: '文本' },
        { id: 'number', name: '数字' },
        { id: 'select', name: '枚举' },
        { id: 'file', name: '文件' },
        { id: 'date', name: '日期' },
        { id: 'textarea', name: '文本域' },
        { id: 'cascader', name: '地址级联' },
        { id: 'tree', name: '枚举下拉树' }
      ],
      form: {
        maxLength: null,
        minValue: null,
        maxValue: null,
        precision: null,
        ismultiple: null,
        enum: '',
        maxFile: null,
        fileType: '',
        format: '',
        range: null
      }, // 表单
      required: null, // 是否必填
      labelCol: { span: 4 }, // label宽度
      wrapperCol: { span: 20 }, // wrap宽度
      modalTitle: '', // 弹窗标题
      modalShow: false, // 弹窗显示与隐藏
      index: null, // 选中列的下标
      modalLabel: '' // 标题
    }
  },
  components: {
    RulesAdd: () => import('@/views/businessAssembly/public/spareparts/rulesAdd.vue'),
    SearchEnum: () => import('@/views/businessAssembly/public/spareparts/searchEnum.vue')
  },
  mounted() {},
  methods: {
    // 初始化
    init(record, index) {
      this.index = index
      this.modalTitle = record.t
      this.modalLabel = record.describe
      this.modalShow = true
      this.form = {
        maxLength: null,
        minValue: null,
        maxValue: null,
        precision: null,
        ismultiple: null,
        enum: '',
        maxFile: null,
        fileType: '',
        range: null,
        expression: record.expression || ''
      }
      this.activeKey = record.type
      this.required = record.required
      switch (this.activeKey) {
        case 'input': {
          this.form.maxLength = record.options.maxLength
          break
        }
        case 'number': {
          this.form.minValue = record.options.minValue
          this.form.maxValue = record.options.maxValue
          this.form.precision = record.options.precision
          break
        }
        case 'select': {
          this.form.ismultiple = record.options.ismultiple
          this.form.enum = record.options.enum
          break
        }
        case 'file': {
          this.form.maxFile = record.options.maxFile
          this.form.fileType = record.options.fileType
          break
        }
        case 'date': {
          this.form.format = record.options.format
          break
        }
        case 'textarea': {
          this.form.maxLength = record.options.maxLength
          break
        }
        case 'cascader': {
          this.form.range = record.options.range
          break
        }
        case 'tree': {
          this.form.ismultiple = record.options.ismultiple
          this.form.enum = record.options.enum
          break
        }
      }
      this.$nextTick(() => {
        if (record?.rules?.length) {
          let rulesCopy = record.rules.filter(item => {
            if (!item.required) {
              return item
            }
          })
          this.$refs.rulesAddRef.regExpList = rulesCopy.map(item => {
            return {
              message: item.message,
              regexp: item.pattern
            }
          })
        } else {
          this.$refs.rulesAddRef.regExpList = []
        }
      })
    },
    // 单选框change事件
    radioChange(e) {
      this.form = {
        maxLength: null,
        minValue: null,
        maxValue: null,
        precision: null,
        ismultiple: null,
        enum: '',
        maxFile: null,
        format: '',
        range: null
      }
      this.activeKey = e.target.value
    },
    // 枚举组件change事件
    enumValueChange(value) {
      this.form.enum = value
    },
    // 弹窗确认按钮
    modalConfirm() {
      let formCopy = {}
      let res = this.$refs.rulesAddRef.f_checkRules()
      if (res.status) {
        formCopy.rules = this.$refs.rulesAddRef.regExpList.map(item => {
          return {
            message: item.message,
            pattern: item.regexp,
            trigger: 'blur'
          }
        })
        formCopy.required = this.required
        if (this.required) {
          let obj = {}
          if (this.activeKey == 'input') {
            obj = { required: true, message: this.modalLabel, trigger: 'change', pattern: '[^\\s\\r\\n]' }
          } else {
            obj = { required: true, message: this.modalLabel, trigger: 'change' }
          }
          formCopy.rules.push(obj)
        }
        formCopy.type = this.activeKey
        switch (this.activeKey) {
          case 'input': {
            formCopy.options = {
              maxLength: this.form.maxLength
            }
            break
          }
          case 'number': {
            formCopy.options = {
              minValue: this.form.minValue,
              maxValue: this.form.maxValue,
              precision: this.form.precision
            }
            break
          }
          case 'select': {
            formCopy.options = {
              ismultiple: this.form.ismultiple,
              enum: this.form.enum
            }
            break
          }
          case 'file': {
            formCopy.options = {
              maxFile: this.form.maxFile,
              fileType: this.form.fileType
            }
            break
          }
          case 'date': {
            formCopy.options = {
              format: this.form.format
            }
            break
          }
          case 'textarea': {
            formCopy.options = {
              maxLength: this.form.maxLength
            }
            break
          }
          case 'cascader': {
            formCopy.options = {
              range: this.form.range
            }
            break
          }
          case 'tree': {
            formCopy.options = {
              ismultiple: this.form.ismultiple,
              enum: this.form.enum
            }
            break
          }
        }
        formCopy.expression = this.form.expression
        this.$emit('actionChange', formCopy, this.index)
        this.modalShow = false
      }
    },
    // 弹窗取消按钮
    modalCancel() {
      this.modalShow = false
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-form-item {
  margin-bottom: 12px;
}

.type_unit {
  margin-top: 10px;
}
</style>
